<template>
  <div style="margin-top: 20px;margin-left: 20px">
    <h1 style="margin-bottom: 20px">个人中心</h1>
    <div>
      <div style="width: 70px">
        <el-row>
          <el-col>
            <el-image :src="userInfo.headUrl" style="width: 70px;  height: 70px;border-radius: 50%"/>
          </el-col>
          <el-col style="text-align: center;margin-top: 10px">
            <el-tag>昵称：{{ userInfo.nickname }}</el-tag>
          </el-col>
          <el-col style="margin-top: 10px;text-align: center ">

            <el-tag>用户名: {{ userInfo.username }}</el-tag>
          </el-col>

        </el-row>
      </div>
      <div style="width: 400px;margin-top: 10px">
        <el-tag>简介： {{ userInfo.title }}
        </el-tag>
      </div>
      <div style="margin-top: 10px">
        <el-tag>手机号： {{ userInfo.phone }}
        </el-tag>
      </div>
      <div style="margin-top: 10px">
        <el-tag>邮箱： {{ userInfo.email }}
        </el-tag>
      </div>
    </div>
    <div style="margin-top: 10px">
      <el-button @click="update">修改密码</el-button>
    </div>
  </div>
</template>
<script setup>
import {useUserStore} from "@/store/user";
import {computed} from "vue";

const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)
let update = () => {
  
}
</script>
